<template>
  <div class="TecHome">
    <el-container>
      <el-header height="45px"
        >XXX中学成绩查询系统
        <div class="usermsg">
          <i class="el-icon-user-solid">
            <span>奥特曼</span>
          </i>
          <el-select size="mini" width="30px" v-model="meui" placeholder="菜单">
            <el-option :value="option.value1">>退出</el-option>
            <el-option :value="option.value2">>修改密码</el-option>
          </el-select>
        </div>
      </el-header>
    </el-container>
    <el-container class="mincontainer">
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-main
          >Main
          <el-upload
            class="upload-demo"
            drag
            :action="uploadurl"
            multiple
            :data="upload_data"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
              只能上传xslx文件，且不超过500kb
            </div> -->
          </el-upload>
        </el-main>
      </el-container>
    </el-container>
    <el-container>
      <el-footer height="100px">Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "TecHome",
  components: {},
  data() {
    return {
      option: {
        value1: 1,
        value2: 2,
      },
      meui: "",
      slidebox_status: false,
      uploadurl: this.$store.state.baseUrl + "/uploadExecl",
      upload_data: {
        term: "第一学期",
        grade: "二年级",
        classes: "1班",
        exam: "期末考试",
        subject: "数学",
      },
    };
  },
  created() {
    // console.log(this.$store.state.baseUrl);
  },
  methods: {},
};
</script>
<style lang="scss">
.TecHome {
  width: 100%;
  height: 100%;
  .mincontainer {
    height: 80%;
  }
  .el-header {
    background-color: #189f92;
    color: #fff;
    text-align: left;
    line-height: 45px;
    font-size: 20px;
    .el-select,
    .el-select .el-input.el-input__inner {
      height: 28px;
      width: 40px;

      line-height: 28px;
    }
    .el-input--mini .el-input__inner {
      background: none;
      border: none;
    }
    .usermsg {
      font-size: 15px;
      position: absolute;
      height: 45px;
      width: 130px;
      line-height: 45px;
      right: 0;
      top: 0;
      text-align: center;
      span {
        margin: 0 10px;
      }
    }
  }

  .el-footer {
    background-color: #8d939e;
    color: #fff;
    text-align: center;
    // line-height: 60px;
    // height: 200px;
  }

  .el-aside {
    background-color: #5b5e63;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
    .upload-demo {
      width: 300px;
      .el-upload__text {
        color: #606266;
        position: absolute;
        font-size: 14px;
        left: 89px;
        top: 44px;
        text-align: center;
      }
    }
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
</style>
